{% extends 'baykeshop/base_site.html' %}

{% load i18n static bayke_tags %}

{% block title %}订单确认{% endblock %}

{% block extrahead_script %}
<script src="{% static 'baykeshop/js/axios.min.js' %}"></script>
<script src="{% static 'baykeshop/js/request.js' %}"></script>
{% endblock %}

{% block breadcrumb %}
<div class="container">
	<nav class="breadcrumb is-marginless mt-3 mb-3 is-small" aria-label="breadcrumbs">
		<ul>
			<li><a href="{% url 'baykeshop:home' %}">首页</a></li>
			<li class="is-active"><a href="#" aria-current="page">订单确认</a></li>
		</ul>
	</nav>
</div>
{% endblock %}

{% block container %}
<div class="container">
	{% if is_pay %}
	<div class="box">
		<h1 class="is-size-5">收货地址</h1>
		<img width="100%"
			src="">
		{% address_result address update=False delete=False %}
	</div>

	<div class="box">
		<h1 class="is-size-5">订单商品</h1>
		<div class=" dropdown-divider"></div>
		{% include 'baykeshop/payment/confirm_goods.html' with skus=skus %}

		<div class="dropdown-divider"></div>

		<div id="order">
			<div class="box is-shadowless is-radiusless has-background-light">
				<div class="field">
					<label class="label">订单留言</label>
					<div class="control">
						<textarea class="textarea" v-model="mark" name="mark" placeholder="请备注说明您的特殊要求..."></textarea>
					</div>
				</div>
			</div>

			<div class="is-flex is-flex-direction-column">
				<div class="is-flex mb-2">
					<div class="has-text-right" style="width:85%">{{ pay.num }} 件商品，总商品金额：</div>
					<div class="has-text-left" style="width:10%; margin-left:5%;">¥{{ pay.total }} </div>
				</div>
				<div class="is-flex mb-2">
					<div class="has-text-right" style="width:85%">运费：</div>
					<div class="has-text-left" style="width:10%;margin-left:5%;">¥{{ pay.freight }} </div>
				</div>
				<div class="is-flex has-text-danger-dark">
					<div class=" has-text-right is-size-5" style="width:85%">应付总额：</div>
					<div class=" has-text-left is-size-5" style="width:10%; margin-left:5%;">¥{{ pay.total_amount }} </div>
				</div>
			</div>
			<div class=" dropdown-divider"></div>
			<div class="has-text-right">
				<button class="button is-primary mt-2 pl-6 pr-6 is-large" @click="confirmOrder">提交订单</button>
			</div>
		</div>
	</div>
	{% else %}
	<div class="has-text-centered has-text-danger">
		<h1 class=" is-size-1 mt-6">404 NotFound</h1>
		<p>请选择有效产品进行支付！</p>
	</div>
	{% endif %}

</div>
{% endblock %}


{% block vue %}
	<script>
		var order = new Vue({
			el: "#order",
			delimiters: ['{$', '$}'],
			data:{
				mark: "",
				query: "{{ query }}"
			},
			methods: {
				confirmOrder(){
					let addrs = address._data.formProps
					

					request({
						url: '{% url "baykeshop:orders-list" %}',
						method: 'post',
						data: {
							action: '{{ query.action }}',
							sku: '{{ query.sku }}',
							num: '{{ query.num }}',
							order_mark: this.mark,
							name: addrs.name,
							phone: addrs.phone,
							email: addrs.email,
							address: `${addrs.province}${addrs.city}${addrs.county}${addrs.address}`
						}
					}).then(res => {
						if (res.status == 201){
							location.href = res.data.redirectPay
						}else{
							navbar.toastMessage('is-danger', `${res.status}${res.statusText}`)
						}
					})

				}
			},
		})
	</script>
{% endblock %}
	